<template>
  <div class="identityCardStyle">
    <a-upload
      :action="uploadUrl"
      :headers="headers"
      list-type="picture-card"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <img style="width: 100%" v-if="identityCardUrl" :src="`${identityCardPrv}?x-oss-process=image/resize,h_200`" alt="identityCardUpload"/>
      <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">
          {{identityCardText}}
        </div>
      </div>
    </a-upload>
    <div v-show="disabled" class="disableWhole" @click="previewImageModal(identityCardPrv)"></div>

    <!-- 查看图片 -->
    <preview-img-modal v-if="previewImage" :src="previewImage" @clear-src="clearSrc"/>
  </div>
</template>

<script>
import { REQUEST_INTEFACE_URL } from '@/common/config'
import requestHeads from '@/api/request'

// const getBase64 = (file) => {
//   return new Promise((resolve, reject) => {
//     const reader = new FileReader()
//     reader.readAsDataURL(file)
//     reader.onload = () => resolve(reader.result)
//     reader.onerror = error => reject(error)
//   })
// }

export default {
  name: 'upload-identity-card',
  props: {
    identityCardField: String,
    identityCardText: String,
    url: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      headers: null,
      uploadUrl: REQUEST_INTEFACE_URL + '/file/upload',
      identityCardPrv: null,
      identityCardUrl: null,
      previewImage: null
    }
  },
  methods: {
    beforeUpload () {
      this.headers = requestHeads()
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // getBase64(info.file.originFileObj).then(imageUrl => {
        //   this.identityCardPrv = imageUrl
        //   this.loading = false
        // })

        this.identityCardPrv = info.file.response.data.url
        this.identityCardUrl = info.file.response.data.url // 获取响应地址
        this.$emit('success', this.identityCardField, this.identityCardUrl)
      }
    },
    previewImageModal (src) {
      this.previewImage = src
    },
    clearSrc () {
      this.previewImage = null
    }
  },
  watch: {
    url () {
      this.identityCardUrl = this.url
      this.identityCardPrv = this.url
    }
  }
}
</script>

<style lang="less" scoped>

.identityCardStyle {
  position: relative;
  float: left;
  width: 200px;
  height: 125px;
  margin: 15px 15px 15px 0;
  .ant-upload-picture-card-wrapper {
    width: 100%;
    height: 100%
  }
  .ant-upload-select-picture-card {
    img{ height: 102px;}
    .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
    i {
      font-size: 32px;
      color: #999;
    }
  }

  .disableWhole {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2)
  }
}
</style>
